<template>
  <div>
    <div class="list-btn">
      类型:
      <Select clearable style="width:200px" v-model="params.type" placeholder="请选择类型">
        <Option :value=1>banner</Option>
        <Option :value=2>落地页</Option>
        <Option :value=3>首页弹窗</Option>
      </Select>
    </div>
    <div class="list-btn">
      状态:
      <Select clearable style="width:200px" v-model="params.deleted" placeholder="全部">
        <Option value=' '>全部</Option>
        <Option :value=0>启用</Option>
        <Option :value=1>禁用</Option>
      </Select>
    </div>
    <div class="list-btn">
      最近一次修改时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"  ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <!--<Input v-model.trim="params.name" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />-->
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
      <Button type="primary" style="margin-left: 10px;" @click="showModal.isShow=true;type='新增';">新增轮播图</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>

    <Modal
      v-model="showModal.isShow"
      :title="`${type}轮播图`"
      width="500px"
      :footer-hide="true"
      :loading="loading"
      :closable="false"
      :mask-closable="false">
      <Form ref="formRole" :rules="ruleValidate" :model="formRole" :label-width="80">
        <FormItem label="图片名称" prop="title">
          <Input v-model="formRole.title" placeholder="请输入" style="width:200px"></Input>
        </FormItem>
        <FormItem label="上传图片" prop="image">
          <upload-img :show-img="formRole.image" v-model="formRole.image" @handleSuccess="handleSuccessImg"></upload-img>
        </FormItem>
        <FormItem label="跳转链接" prop="url">
          <Input v-model="formRole.url" placeholder="请输入" style="width:200px"></Input>
        </FormItem>
        <FormItem label="开始时间" prop="beginTime">
          <DatePicker type="date"  v-model="formRole.beginTime" format="yyyy-MM-dd" placeholder="选择开始时间" style="width: 200px"  ></DatePicker>

        </FormItem>
        <FormItem label="结束时间" prop="endTime">
          <DatePicker type="date"  v-model="formRole.endTime"  format="yyyy-MM-dd" placeholder="选择结束时间" style="width: 200px"  ></DatePicker>
        </FormItem>
        <FormItem label="类型" prop="type">
          <Select clearable v-model="formRole.type" placeholder="请选择" style="width:200px">
            <Option :value=1>banner</Option>
            <Option :value=2>落地页</Option>
            <Option :value=3>首页弹窗</Option>
          </Select>
        </FormItem>
        <FormItem label="状态" prop="deleted">
          <Select clearable v-model="formRole.deleted" placeholder="请选择" style="width:200px">
            <Option :value=0>启用</Option>
            <Option :value=1>禁用</Option>
          </Select>
        </FormItem>
        <FormItem label="商户" prop="merchantId">
          <Select clearable v-model="formRole.merchantId" placeholder="请选择" style="width:200px">
            <Option v-for="(item,index) in merchantList" :value=item.id :key="item.id">{{item.merchantName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div style="margin-left: 350px;">
        <Button @click="showModal.isShow = false;resetValidate('formRole')">取消</Button>
        <Button type="primary" @click="roleUpdate">确定</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  import uploadImg from '../../template/uploadImgs'
  import common from '../../mixin/common'
  import {urlType} from '../../../js/rules'
  export default {
    mixins:[listMixin,common],
    components: {
      pageList,
      pageButton,
      confirmDialog,
      uploadImg
    },
    data () {
      return {
        token:sessionStorage.getItem('token'),
        tag: {
          'title': '轮播图管理',
          'path': '/work/banner/list'
        },
        listTitle: [
          // {
          //   title: '轮播图名称',
          //   key: 'title',
          //   align:'center',
          //   minWidth:160,
          //   render:(h,params) => {
          //     return h('div', params.row.title ? params.row.title : "—")
          //   }
          // },
          {
            title: '轮播图',
            key: 'image',
            align:'center',
            minWidth:120,
            render:(h,params) => {
              return h('img',{
                attrs: {
                  src:params.row.image
                },
                style: {
                  width: 'auto',
                  height: '38px',
                  textAlign:'center',
                  verticalAlign: 'middle'
                }
              })
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            align:'center',
            minWidth:180,
            render:(h,params) => {
              return h('div', params.row.createTime ? this.getLocalTime(params.row.createTime) : "—")
            }
          },
          {
            title: '最近一次修改时间',
            key: 'title',
            align:'center',
            minWidth:160,
            render:(h,params) => {
              return h('div', params.row.updateTime ? this.getLocalTime(params.row.updateTime) : "—")
            }
          },
          {
            title: '操作人',
            key: 'updatorName',
            align:'center',
            minWidth:100,
            render:(h,params) => {
              return h('div',params.row.updatorName?params.row.updatorName:'—')
            }
          },
          {
            title: '类型',
            key: 'type',
            align:'center',
            minWidth:120,
            render:(h,params) => {
              return h('div', params.row.type == 1 ? 'banner' : (params.row.type == 2 ? '落地页' : '首页弹窗'))
            }
          },
          {
            title: '状态',
            key: 'deleted',
            align:'center',
            minWidth:100,
            render:(h,params) => {
              let status = '';
              let btnType = '';
              switch (params.row.deleted){
                case 0 :
                  status = '已启用';
                  btnType = 'success';
                  break;
                case 1:
                  status = '已禁用';
                  btnType = 'warning';
                  break;
              }
              return h('Button',{
                props: {
                  type: btnType,
                  size: 'small'
                }
              }, status)
            }
          },
          {
            title: '跳转链接',
            key: 'url',
            align:'center',
            minWidth:200,
            render:(h,params) => {
              return h('div', params.row.url ? params.row.url : "—")
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showModal.isShow = true;
                      this.resetValidate('formRole');
                      this.type = '编辑';
                      this.formRole = JSON.parse(JSON.stringify(params.row))
                    }
                  }
                }, '编辑'),
               /* h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: `<p>是否删除该轮播图?</p><p>轮播图删除后将无法恢复！！！</p>`,
                        onOk: () => {
                          let data = {};
                          data.id = params.row.id;
                          this.delItem('/bksysbanner/discard', data);
                        },
                        onCancel: () => {
                        }
                      });
                    }
                  }
                }, '删除'),*/
              ]);
            }
          }
        ],
        url:'bksysbanner/list',
        nameListUrl: '',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
        showModal: {
          isShow: false
        },
        formRole: {},
        type: '',
        ruleValidate: {
          title: [
            { required: true, message: '请填写图片名称', trigger: 'blur' }
          ],
          beginTime: [
            { required: true, message: '请选择开始时间', trigger: 'blur',pattern: /.+/},
          ],
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'blur',pattern: /.+/ }
          ],
          url: [
            { required: false, trigger: 'blur' ,validator: urlType}
          ],
          image: [
            { required: true, message: '请上传图片', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'blur',type:'number' }
          ],
          deleted: [
            { required: true, message: '请选择有效标识', trigger: 'blur',type:'number' }
          ],
          merchantId: [
            { required: true, message: '请选择商户', trigger: 'blur',type:'number' }
          ]
        },
        uploadData: {},
        images:''
      }
    },
    methods: {
      startTimeT(e) {
        console.log(typeof (3), 1)
        this.formRole.beginTime = e;
      },
      endTimeT(e) {
        this.formRole.endTime = e;
      },
      roleUpdate() {
        this.$refs['formRole'].validate((valid) => {
          if (valid) {
            let url = '';
            let date = new Date();

            let formdata = JSON.parse(JSON.stringify(this.formRole))

            let beginTime = this.getLocalTime(formdata.beginTime);
            let endTime = this.getLocalTime(formdata.endTime);
            console.log(formdata.url)
            let data = {
              title: formdata.title,
              url: formdata.url==undefined?'':formdata.url,
              image: formdata.image,
              type: formdata.type,
              deleted: formdata.deleted,
              beginTime: beginTime.toString(),
              endTime: endTime.toString(),
              merchantId: formdata.merchantId,
            };
            if (this.type == '新增') {
              url = '/bksysbanner/append';
            } else {
              data.id = formdata.id;
              url = '/bksysbanner/modify';
            }
            this.$post(url, data)
              .then((res) => {
                if (res.code === 0) {
                  console.log(res.data)
                  this.showModal.isShow = false;
                  this.$Message.success(`${this.type}成功！`);
                  this.getList(this.url);
                  this.resetValidate('formRole');
                }
              }, (err) => {
                console.log(err);
              })
          }

        })
      },
      handleSuccessImg(data) {
        this.$set(this.formRole, 'image', data.imgUrl)
        this.images = 'data.imgUrl';
        console.log(data)

        this.$refs.formRole.validateField('image')
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
